<template>
	<view class="content">
        <view class="cate-wrap" scroll-x="true">
			<text v-for="(v, i) in cateList" :key="i" class="cate-item">
				{{ v.name }}
			</text>
		</view>
		<InfoTip v-if="pageLoading && !list.length"/>
		<view class="order-list" @click="jumpTo(v)">
			<view v-for="(v, i) in list" :key="i" class="order-item">
				<view class="status">
					<text class="type">{{ v.sendTypeShow }}</text>
					<text>{{ v.orderStatusShow }}</text>
				</view>
				<view class="info">
					<image
						lazy-load mode="aspectFill"
						:src="v.orderProductVos[0].mainImgUrl"
						class="img"
					></image>
					<view class="info-con">
						<text class="title">{{ v.orderProductVos[0].productName }}</text>
						<text class="desc">{{ v.orderProductVos[0].spuNames }}</text>
						<view class="price-wrap">
							<text class="price">￥{{ v.orderProductVos[0].skuPrice }}</text>
							<text>x{{ v.orderProductVos[0].count }}</text>
						</view>
					</view>
				</view>
				<view class="time-wrap">
					<text class="time">{{ v.submitTime.split('T')[0] }}</text>
					<view>
						共3件
						<text class="all-price">合计：￥22.22</text>
					</view>
				</view>
				<view class="button-wrap">
					<text class="btn-item">再来一单</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import InfoTip from '@/components/InfoTip/index.vue';

export default {
	components: {
		InfoTip
	},
	data() {
		return {
			list: [],
			cateList: [{
				name: '全部',
				status: '1'
			},{
				name: '已支付',
				status: '1'
			},{
				name: '待支付',
				status: '1'
			},{
				name: '已完成',
				status: '1'
			},{
				name: '已取消',
				status: '1'
			}],
			pageLoading: true,
		}
	},
	onReachBottom: function() {
		// Do something when page reach bottom.
	},
	onLoad() {
		this.init();
	},
	methods: {
		init() {
			this.getList();
		},
		getList() {
			this.$http.get('/order/getUserOrderList', {}).then(res => {
				this.list = [...this.list, ...res.data];
			}).catch(e => {
				console.log(e)
			})
		},
		jumpTo() {
			uni.navigateTo({
				url: '/pages/order/detail?id=1&name=uniapp'
			});
		},
		fetch() {

		}
	}
}
</script>

<style lang="stylus" scoped>
.cate-wrap
	display flex
	flex-wrap nowrap
	justify-content space-between
	padding 30rpx
	background #fff
	.cate-item
		font-size 28rpx

.order-list
	padding 20rpx 30rpx 1rpx

	.order-item
		background #fff
		border-radius 8rpx
		padding 30rpx
		margin-bottom 24rpx

		.status
			display flex
			justify-content space-between
			align-items center
			font-size 30rpx

			.type
				background #E96017
				color #fff
				display inline-block
				padding 4rpx 10rpx
				font-size 24rpx
		.info
			display flex
			margin-top 30rpx
			.img
				width 180rpx
				height 180rpx

			.info-con
				flex 1 0 0
				height 180rpx
				display flex
				flex-direction column
				margin-left 20rpx

				.title
					font-size 28rpx

				.desc
					color #999

				.price-wrap
					margin-top auto
					display flex
					justify-content space-between

					.price
						font-size 32rpx
						color #F52711
						font-weight 500

		.time-wrap
			display flex
			justify-content space-between
			align-items center
			margin 30rpx 0

			.time
				color #999

			.all-price
				font-size 36rpx
				font-weight 500
				margin-left 20rpx
		.button-wrap
			display flex
			justify-content flex-end
			.btn-item
				display inline-block
				height 48rpx
				line-height 48rpx
				border-radius 24rpx
				padding 0 14rpx
				border 1rpx solid #ccc
				color #666


</style>
